<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<%@page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="/WEB-INF/tlds/c.tld" prefix="c"%>
<%@ taglib uri="/WEB-INF/tlds/fmt.tld" prefix="fmt"%>
<%@ taglib uri="/WEB-INF/tlds/tiles-jsp.tld" prefix="tiles"%>
<c:set var="appCtx" value="${pageContext.request.contextPath}" />
<c:set var="localeLanguage" value="${pageContext.request.locale.language}" />

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link type="text/css"
	href="${pageContext.request.contextPath}/resources/css/jquery-ui/jquery-ui-1.8.16.custom.css"
	rel="stylesheet" />
<link
	href="${pageContext.request.contextPath}/resources/css/standard/main.css"
	rel="stylesheet" type="text/css" media="screen" />
<script type="text/javascript"
	src="${pageContext.request.contextPath}/resources/js/jquery/jquery-1.6.2.min.js"></script>
<script type="text/javascript"
	src="${pageContext.request.contextPath}/resources/js/jquery/jquery-ui-1.8.16.custom.min.js"></script>

<script
	src="${pageContext.request.contextPath}/resources/js/other/jquery-masked-input.js"
	type="text/javascript"></script>
<script type="text/javascript" 
	src="${pageContext.request.contextPath}/resources/js/jquery/jquery.ui.datepicker-es.js"></script>
<style type="text/css">
center pre {
	text-align: left;
}

</style>
<script type="text/javascript">
//la gran mayoria de las inicializaciones van en el ready()
$(function() {
	
	$.datepicker.setDefaults($.datepicker.regional["${localeLanguage}"]);
	$( "#fecha" ).datepicker(
					{
				showOn: "both",
				dateFormat: "dd/mm/yy",
				buttonImage: "${pageContext.request.contextPath}/resources/images/standard/calendar.png",
				buttonImageOnly: true,
				changeYear: true,
				changeMonth: true,
				
					}
				);
});
</script>
</head>
<body>
	<div id="layoutContainer" >
	<table id="layout">
		<tr>
			<td colspan="2" id="header"><%@include
					file="./../jsp/structure/header.jsp"%></td>
		</tr>
		<tr>
			<td id="strut" colspan="2"></td>
		</tr>
		<tr>
			<td></td>
		</tr>
		<tr id="middle">
			<td id="navigation-menu"><%@include
					file="./../jsp/structure/navigation-menu.jsp"%></td>
			<td id="content">
				<!-- EJEMPLO ACA -->
				<form class="form">
					<fieldset>
						<legend>Formualrio de ejemplo</legend>
						<table cellpadding="3" cellspacing="3" border="1">
							<tr>
								<td colspan="2" class="formNotice">Los campos marcados con
									* son obligatorios</td>
							</tr>
							<tr>
								<td class="formLabel"><label for="nombre">Fecha:</label></td>
								<td><input type="text" name="fecha" id="fecha" value="" /><span
									class="errorLabel">${form_errors['nombre'].errorMessage}</span></td>
							</tr>
							<tr>
								<td colspan="2">
									<pre>
El armado de formularios esta visto en formularios.jsp
El caso especial de fechas y horas se puede hacer enmascarando campos o usando el componente datepicker
de jquery. 
El caso mas sencillo, es el campo que al entrar se dispara el calendario en el dia de hoy. En el ready()
agregar
		$( "#id_de_campo_fecha" ).datepicker();
El tamaño de cada picker en particular se puede ocntrolar con css. Normalmente deberia existir en la 
hoja de estilos principal, pero se puede usar el csiguiente codigo:
div.ui-datepicker{
 font-size:10px;
}

Algo que si es importante es mantener el formato de la fecha una vez que se trae del server, es decir
que con usar 

&lt;input type="text" name="fecha" id="fecha" value="" /&gt;

No alcanza, sino que siempre hay que especificar el value, usando preferentemente fmt:formatDate

&lt;input type="text" 	name="fecha" id="fecha" 
		value="&lt;fmt:formatDate value="${param.fecha}" pattern="dd/MM/yyyy" /&gt;" /&gt;

esto es necesario ya que si no, un objeto Date al "escribirse" en un campo de texto queda con el formato
full de Java: <%=new java.util.Date() %> que no es lo que se requiere.

Para trabajar con localizaciones del calendario se deben realizar dos cosas
-debe importarse el .js que contiene la traducción al locale correspondiente 
-ejecutar la creación del calendario pasandole el locale-language que corresponda 
	($( "#fecha" ).datepicker( $.datepicker.regional[ "es" ] );)

Para cualquier otro detalle, pinchar <a href="http://jqueryui.com/demos/datepicker/">aqui</a>

									</pre>
								</td>
							</tr>
						</table>
					</fieldset>
				</form>
			</td>
		</tr>
		<tr>
			<td colspan="2"><%@include file="./../jsp/structure/footer.jsp"%></td>
		</tr>
	</table>
	</div>

</body>

</html>
